<template>
    <div class="table">
        <div class="t-header">
            <div v-for="column in columns" :key="column.title" :style="{width: column.width || 'auto', textAlign: column.align || 'left'}">{{column.title}}</div>
        </div>
        <div v-if="tableData.length" class="t-body">
            <div class="th" v-for="item in tableData" :key="item.id">
                <div v-for="column in columns" :key="column.title" :style="{width: column.width || 'auto', textAlign: column.align || 'left'}">
                    <slot v-if="column.slot" :name="column.slot" :row="item"></slot>
                    <template v-else>{{item[column.prop]}}</template>
                </div>
            </div>
        </div>
        <Empty v-else :eStyle="{paddingTop: '.266667rem'}" />
    </div>
</template>

<script>
import Empty from '@/components/Empty'
export default {
    props: ['columns', 'tableData'],
    components: {
        Empty
    }
}
</script>

<style lang="scss" scoped>
.table{
    padding-top: .266667rem;
    .t-header{
        display: flex;
        font-size: .24rem;
        font-weight: bold;
        color: rgba(0, 0, 0, .6);
        padding: .266667rem .333333rem;
        border-bottom: .013333rem grey solid;
    }
    .t-body{
        .th{
            display: flex;
            align-items: center;
            font-size: .266667rem;
            padding: .266667rem .333333rem;
            border-bottom: .013333rem grey solid;
            color: rgba(0, 0, 0, .87);
        }
    }
}
</style>